const gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin'),
    uglify = require('gulp-uglify'),
    babel = require('gulp-babel'),
    connect = require('gulp-connect'),
    sass = require('gulp-sass')

// 制定一个压缩html的任务
gulp.task('html', () => {
    gulp.src('src/**/*.html')
      .pipe(htmlmin({
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS 
      }))
      .pipe(gulp.dest('dist'))
      //
      .pipe(connect.reload())
  })

//css 任务
gulp.task('css', () => {
    gulp.src('src/css/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'))
    .pipe(connect.reload())
})


//制定压缩js任务

gulp.task('js', () => {
    gulp.src('src/js/**/*.js')
    .pipe(babel({
        presets:['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(connect.reload())
})


//制定开启服务器任务
gulp.task('server', () => {
    connect.server({
        root:'dist',
        port:1969,
        livereload:true
    })
})


//img任务
gulp.task('img', () => {
    gulp.src('src/imgs/**/*')
    .pipe(gulp.dest('dist/imgs'))
})


//libs任务
gulp.task('libs', () => {
    gulp.src('src/libs/**/*')
    .pipe(gulp.dest('dist/libs'))
})



// 制定watch任务
gulp.task('watch', () => {
    gulp.watch('src/**/*.html', ['html'])
    gulp.watch('src/js/**/*.js', ['js'])
    gulp.watch('src/css/**/*.scss',['css'])
  })


gulp.task('default', ['html', 'js', 'css', 'server', 'img', 'libs', 'watch'])